<template>
  <div id="user-manage">
    <vxe-toolbar>
      <template #buttons>
        <a-input-search
          v-model:value="ApiData.userName"
          placeholder="用户账户查询"
          style="width: 200px"
          @search="onSearch"
        />
      </template>
    </vxe-toolbar>
    <!-- 表格 -->
    <vxe-table
      border
      show-header-overflow
      show-overflow
      resizable
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column field="username" title="用户名" min-width="180"></vxe-table-column>
      <vxe-table-column field="picture" title="头像" width="180">
        <template #default="{ row }">
          <a-avatar alt="error" :src="row.picture" />
        </template>
      </vxe-table-column>
      <vxe-table-column field="role.role" title="角色" min-width="180">
        <template #default="{ row }">
          <a-tag color="pink" v-if="row.role.role == 'USER'">用户</a-tag>
          <a-tag color="red" v-else-if="row.role.role == 'ADMIN'">
            普管
          </a-tag>
          <a-tag color="orange" v-else-if="row.role.role == 'SADMIN'">
            超管
          </a-tag>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" min-width="180">
        <template #default="{ row }">
          <div class="operate">
            <!-- 拉黑 -->
            <a-switch
              checked-children="黑"
              un-checked-children="正"
              size="small"
              :loading="loading"
              :default-checked="row.banMark == '1' ? true : false"
              @click="changeStatus(row)"
            />
            <!-- 编辑 -->
            <a
              class="icon-bianji iconfont icon"
              style="margin-left: 20px"
              @click="chooseUser(row)"
            ></a>
            <!-- 删除 -->
            <a-popconfirm
              placement="right"
              ok-text="Yes"
              cancel-text="No"
              @confirm="deleteUserInfo(row)"
            >
              <template v-slot:title>
                <p>删除不可恢复，确定删除该用户嘛?</p>
              </template>
              <a class="icon-shanchu iconfont icon"></a>
            </a-popconfirm>
          </div>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!-- 分页 -->
    <a-pagination
      show-quick-jumper
      :default-current="1"
      :total="dataTotalNum"
      :defaultPageSize="ApiData.pageSize"
      @change="onChange"
    />
    <!-- 编辑弹窗 -->
    <a-modal
      title="编辑用户"
      :visible="deleteUserShow"
      :confirm-loading="confirmLoading"
      cancelText="取消"
      okText="确定"
      @ok="sureEditorUser"
      @cancel="deleteUserShow = false"
    >
      <div>
        <!-- 账户 -->
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="5">账户：</a-col>
          <a-col :span="19">
            <a-input
              placeholder="Basic usage"
              v-model:value="chooseUserInfo.username"
              :disabled="true"
            />
          </a-col>
        </a-row>
        <!-- 头像 -->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          :style="{ padding: '10px 0 !important' }"
        >
          <a-col :span="5">头像：</a-col>
          <a-col :span="19">
            <img
              :src="chooseUserInfo.picture"
              alt="avatar"
              style="width: 100px; height: 100px"
            />
          </a-col>
        </a-row>
        <!-- 权限 -->
        <a-row
          type="flex"
          v-if="role == 'SADMIN'"
          justify="space-around"
          align="middle"
          :style="{ paddingBottom: '10px !important' }"
        >
          <a-col :span="5">权限：</a-col>
          <a-col :span="19">
            <a-select
              :defaultValue="chooseUserInfo.role.role"
              style="width: 120px"
              @change="quanxianChange"
            >
              <a-select-option value="USER">普通用户</a-select-option>
              <a-select-option value="ADMIN">管理员</a-select-option>
            </a-select>
          </a-col>
        </a-row>
        <!-- 新密码 -->
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="5">密码：</a-col>
          <a-col :span="19">
            <a-input-password
              placeholder="请输入用户新密码"
              v-model:value="userInfo.password"
            />
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { userList } from '@/api/user'
import { deleteUser, UserStatus, ModifyUserInfo } from '@/api/manager'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      // 表格数据居中
      allAlign: 'center',
      // api数据
      ApiData: {
        pageNum: 1,
        pageSize: 10,
        type: 0,
        userName: '',
      },
      // 表格数据
      tableData: [],
      // 总数
      dataTotalNum: 0,
      // 删除用户弹窗
      deleteUserShow: false,
      // 当前选择用户信息
      chooseUserInfo: {},
      // 修改用户信息
      userInfo: {
        userId: null,
        password: '',
        picture: '',
        role: '',
      },
      // 编辑确认loading
      confirmLoading: false,
      status: 1,
      // 用户状态loading
      loading: false,
    }
  },
  mounted() {
    this.getUserListData()
  },
  computed: {
    ...mapGetters({
      role: 'acl/role',
    }),
  },
  methods: {
    /**
     * 用户查询
     */
    onSearch() {},
    /**
     * 分页
     */
    onChange(pageNumber) {
      this.ApiData.pageNum = pageNumber
      this.getUserListData()
    },
    /**
     * 用户列表查询
     */
    async getUserListData() {
      userList(this.ApiData).then((res) => {
        this.tableData = res.queryResult.list
        this.dataTotalNum = res.queryResult.total
      })
    },
    /**
     * 删除用户
     */
    deleteUserInfo(info) {
      deleteUser(info.id).then((res) => {
        this.$message.success('删除成功')
        this.getUserListData()
      })
    },
    /**
     * 用户搜索
     */
    onSearch() {
      this.ApiData.type = 1
      this.getUserListData()
    },
    /**
     * 选择用户 达赖弹窗
     */
    chooseUser(info) {
      this.deleteUserShow = true
      this.chooseUserInfo = Object.assign(info)
      console.log(this.chooseUserInfo)
      this.userInfo.picture = info.picture
      this.userInfo.userId = info.id
    },
    /**
     * 确定编辑用户
     */
    sureEditorUser() {
      this.confirmLoading = true

      var form = {
        role: this.userInfo.role,
        id: this.userInfo.userId,
      }
      if (this.userInfo.password.length > 0) {
        form.password = this.userInfo.password
      }
      ModifyUserInfo(form).then((res) => {
        this.getUserListData()
        this.deleteUserShow = false
        this.confirmLoading = false
        this.$message.success('修改成功')
      })
    },
    /**
     * 改变用户状态
     */
    changeStatus(userInfo) {
      this.loading = true
      var apiForm = {
        userId: userInfo.id,
        type: userInfo.banMark == '1' ? '0' : '1',
      }
      UserStatus(apiForm).then((res) => {
        this.getUserListData()
        this.loading = false
      })
    },
    /**
     * 权限选择
     */
    quanxianChange(e) {
      if (e === 'ADMIN') {
        this.userInfo.role = '1'
      } else if (e === 'USER') {
        this.userInfo.role = '0'
      }
    },
  },
}
</script>
<style lang="less" scoped>
.icon {
  margin: 0 10px;
  &:nth-child(1) {
    color: gray;
  }
}
.operate {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>>

